<!-- #include file="FastAsp/FastAsp.asp" -->
<%
'获取操作类型
Dim action : action = Fast.Get("action")

'处理Ajax请求
If action <> "" Then
    Select Case action
        Case "success"
            Fast.Success "操作成功", "default.asp", 3
            
        Case "error"
            Fast.Error_ "操作失败", "default.asp", 3
        Case "404"
            Fast.Show404()
        Case "503"
           Dim data : Set data = Server.CreateObject("Scripting.Dictionary")
data.Add "site_name", "FastAsp演示站"
data.Add "maintain_time", "2024-03-20 12:00 - 18:00"
            data.Add "maintain_content", "系统升级优化"
            data.Add "recover_time", "预计18:00恢复正常"
            data.Add "contact_email", "admin@fastasp.com"
            data.Add "contact_phone", "1234567890"
            Fast.ShowMaintain data
            
        Case "ajax-success"
            Fast.WriteRawJson Array("msg","Ajax操作成功","code",0)
            
        Case "ajax-error"
            Fast.Error_ "Ajax操作失败"
    End Select
    Response.End
End If
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FastAsp提示演示</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
            max-width: 800px;
            margin: 30px auto;
            padding: 0 20px;
            line-height: 1.6;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        .demo-section {
            background: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }
        .demo-section h2 {
            margin-top: 0;
            color: #1a73e8;
        }
        .btn-group {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.2s;
        }
        .btn-primary {
            background: #1a73e8;
            color: white;
        }
        .btn-danger {
            background: #dc3545;
            color: white;
        }
        .btn:hover {
            opacity: 0.9;
        }
        #ajax-result {
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
            display: none;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <h1>FastAsp提示演示</h1>
    
    <div class="demo-section">
        <h2>普通请求演示</h2>
        <p>点击按钮后将跳转到提示页面，然后自动返回此页面</p>
        <div class="btn-group">
            <a href="?action=success" class="btn btn-primary">显示成功提示</a>
            <a href="?action=error" class="btn btn-danger">显示错误提示</a>
            <a href="?action=404" class="btn btn-danger">显示404提示</a>
            <a href="?action=503" class="btn btn-danger">显示503提示</a>
        </div>
    </div>

    <div class="demo-section">
        <h2>Ajax请求演示</h2>
        <p>点击按钮后将通过Ajax请求获取提示信息</p>
        <div class="btn-group">
            <button onclick="ajaxDemo('ajax-success')" class="btn btn-primary">Ajax成功提示</button>
            <button onclick="ajaxDemo('ajax-error')" class="btn btn-danger">Ajax错误提示</button>
        </div>
        <div id="ajax-result"></div>
    </div>

    <script>
    function ajaxDemo(action) {
        // 创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        
        // 配置请求
        xhr.open('GET', '?action=' + action, true);
        
        // 设置响应处理
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                var result = document.getElementById('ajax-result');
                if (xhr.status === 200) {
                    try {
                        console.log(xhr.responseText)
                        var response = JSON.parse(xhr.responseText);
                        result.textContent = response.msg;
                        result.className = response.code === 0 ? 'success' : 'error';
                        result.style.display = 'block';
                    } catch (e) {
                        console.log(e)
                        result.textContent = '解析响应失败';
                        result.className = 'error';
                        result.style.display = 'block';
                    }
                } else {
                    result.textContent = '请求失败';
                    result.className = 'error';
                    result.style.display = 'block';
                }
            }
        };
        
        // 发送请求
        xhr.send();
    }
    </script>
</body>
</html>
